<template>
    <div class="top clearfix">
        <div class="logo">xxxx管理系统</div>
        <div class="user-info">
            <span class="user-name">{{ username }}</span>
            <span class="log-out" @click="logout">[退出]</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'top',
  props: {
    username: String
  },
  data () {
    return {

    }
  },
  methods: {
    logout () {
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.top {
  height: 100%;
}
.logo {
  line-height: 50px;
  font-size: 20px;
  float: left;
  margin-left: 20px;
}
.user-info {
  float: right;
  line-height: 50px;
  font-size: 14px;
  margin-right: 20px;
}
.user-name {
  margin-right:10px;
}
.log-out {
  cursor: pointer;
}
</style>
